import { VFC, useEffect, useState, CSSProperties, useMemo } from "react";
import { RcClass, NormalLoading, RcSwitch, RcCase, RcIf } from 'zw-components';
import { LoadingOutlined } from '@ant-design/icons';
import s from './index.module.less';
import errorImgSrc from './error.jpeg';
type IMageSize = 'small'|'middle'|'large';
const mapSize: {[key in IMageSize]: {height: string,width: string}} = {
    small: {
        width: '32px',
        height: '32px',
    },
    middle: {
        width: '64px',
        height: '64px',
    },
    large: {
        width: '128px',
        height: '128px',
    }
}
export const FreeImage: VFC<{src: string, style: CSSProperties, type: 'cycle'|'rect', tag?: 'img'|'div'}> = (props) => {
    const bgImageStyle: CSSProperties = {
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundImage: `url('${props.src}')`,
        position: 'absolute',
        top: '0px',
        left: '0px',
        right: '0px',
        bottom: '0px'
    }
    const {tag = 'div'} = props;
    return (
        <RcClass className={s.container} cls={{[s.cycle]: props.type === 'cycle'}}>
            <div style={props.style}>
                {/* <img src=/> */}
                <RcIf value={tag === 'div'} else={<img style={props.style} src={props.src}/>}>
                    <div style={bgImageStyle}></div>
                </RcIf>
            </div>
        </RcClass>
    );
}
/**
 * 
 * @param props 
 * @example
 * ```tsx
 * <ZImage type="cycle" src={src}/>
 * ```
 * @returns 
 */
export const ZImage: VFC<{src: string, type?: 'cycle'|'rect', style?: CSSProperties, size?: 'small'|'middle'|'large'}> = (props) => {
    const {src, type = 'rect', size = 'small', style = {}} = props;
    const _style = useMemo(() => {
        return {width: mapSize[size].width, height: mapSize[size].height,...style};
    }, [size]);
    return (
        <FreeImage src={src} type={type} style={_style}/>
    );
}
const ErrorImage: VFC = () => {
    return <div className={s.errorImgContainer}>
        <img src={errorImgSrc} width={'32px'} style={{opacity: 0.4}}/>
    </div>
}
/**
 * 
 * @param props 
 * @example
 * 
 * ```tsx
 * <LazyImage src={'http://zengwe.com/tst.png'} type="rect" height="100px" width="100px"/>
 * ```
 * 
 * @returns 
 */
export const LazyImage: VFC<{src: string, style?: CSSProperties, type?: 'cycle'|'rect', tag?: 'img'|'div'}> = (props) => {
    const [loaded, setLoaded] = useState<'loading'|'success'|'error'>('loading');
    const { src,type = 'rect', style = {}, tag = 'div'} = props;
    useEffect(() => {
        let img = new Image();
        img.src = props.src;
        img.onload = () => {
            if(__ENV__ === 'development') {
                setTimeout(() => setLoaded('success'), 1000);
            } else {
                setLoaded('success');
            }     
        }
        img.onerror = () => {
            setLoaded('error');
        }
    }, [props.src]);
    return (
        <RcSwitch value={loaded}>
            <RcCase value={'loading'}>
                <div className={s.lazyContainer} style={props.style}>
                    <LoadingOutlined />
                </div>
            </RcCase>
            <RcCase value={'success'}>
                <FreeImage {...{src, type, style, tag: tag}}/>
            </RcCase>
            <RcCase value={'error'}>
                <div className={s.lazyContainer} style={props.style}>
                    <ErrorImage />
                </div>
            </RcCase>
        </RcSwitch>
    );
}
